<template>
  <div class="c1">
    <p>
      用户名：
      <input type="text" v-model.lazy="name" />
    </p>
    <p>{{ tip }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const name = ref('')
    const tip = ref('')
    // 侦听器
    watch(name, (newValue, oldValue) => {
      console.log(`旧值：${oldValue},新值：${newValue}`)
      setTimeout(function () {
        // eslint-disable-next-line eqeqeq
        if (newValue == 'admin') {
          tip.value = '用户名已存在，请更换一个'
        } else {
          tip.value = '用户名可以使用'
        }
      }, 1000)
    })
    return {
      name,
      tip
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.c1 {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}
</style>
